import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
export default function GradeChart({ score, iszh }) {
    const chartRef = useRef(null)
    useEffect(() => {
        function renderChart() {
            const myChart = echarts.init(chartRef.current);
            const colors = ["#FD7E6E", "#F9D067", "#0077FA"];
            const fontColor = "#0089fa";
            const percent = score;
            const option = {
                title: {
                    text: percent,
                    bottom: '24%',
                    left: 'center',
                    textStyle: {
                        fontSize: '35px',
                        fontWeight: '600',
                        fontFamily: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'gauge',
                        radius: '80%',
                        min: 0,
                        max: 100,
                        center: ['50%', '50%'],
                        axisLine: {
                            lineStyle: {
                                width: 16,
                                color: iszh ? [
                                    [0, colors[0]],
                                    [percent / 100 * 0.4, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: colors[0]
                                        }, {
                                            offset: 1,
                                            color: colors[1]
                                        }]
                                    )],
                                    [percent / 100 * 0.6, colors[1]],
                                    [percent / 100, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: colors[2],
                                        }, {
                                            offset: 0.85,
                                            color: colors[1],
                                        }]
                                    )],
                                     [1, 'rgba(0, 119, 250, 0.2)']
                                ] : [[percent / 100, colors[2]], [1, 'rgba(0, 119, 250, 0.2)']],
                            }
                        },
                        splitLine: {
                            length: 5,
                            distance: 1,
                            lineStyle: {
                                width: 1,
                                color: '#86909C'
                            }
                        },
                        axisTick: {
                            distance: 1,
                            length: 3,
                            lineStyle: {
                                width: 0.5,
                                color: '#86909C'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#86909C',
                                fontSize: 8
                            }
                        },
                        detail: {
                            show: false,
                            offsetCenter: ['0', '110%'],
                            color: '#fff',
                            formatter: function (value) {
                                return value.toFixed(1) + "%";
                            },
                            fontSize: 19
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgb(0,191,255)'
                            }
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 4,
                            itemStyle: {
                                borderWidth: 2
                            }
                        },
                        pointer: {
                            width: 4,
                            itemStyle: {
                                color: '#165DFF'
                            }
                        },
                        data: [{
                            value: percent
                        }],
                        silent: false,
                        title: {
                            offsetCenter: [0, percent + '%'],//设置在线率位置
                            color: fontColor,
                        }
                    },
                    {
                        name: '内部阴影',
                        type: 'gauge',
                        radius: '70%',
                        center: ['50%', '50%'],
                        z: 0,
                        min: 0,
                        max: 100,
                        axisLine: {
                            lineStyle: {
                                color: iszh ? [
                                    [
                                        percent / 100,
                                        new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                                offset: 0,
                                                color: colors[0],

                                            },
                                            {
                                                offset: 0.5,
                                                color: colors[1]
                                            },
                                            {
                                                offset: 1,
                                                color: colors[2]
                                            },
                                        ]),
                                    ],
                                    [1, 'rgba(28,128,245,.0)'],
                                ] : [[percent / 100, '#0077FA'], [1, 'rgba(28,128,245,.0)']],
                                width: 300,
                                opacity: 0.2,
                            },
                        },
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        itemStyle: {
                            show: false,
                        },
                        detail: {
                            show: false
                        },
                        title: {
                            //标题
                            show: false,
                        },
                        data: [
                            {
                                name: 'title',
                                value: percent,
                            },
                        ],
                        pointer: {
                            show: false,
                        },
                    },
                ]
            }
            option && myChart.setOption(option);
        }
        renderChart()
    }, [])
    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
